<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>绑定用户信息</title>
    <link rel="stylesheet" href="/static/css/index.css" />
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/vue.min.js"></script>
    <script src="/static/js/vant.min.js"></script>
    <style>
        #app{
            height: 100vh;
            background-color: #f8f8f8;
        }
        .content {
            margin-top: 10px;
        }
        .van-field__left-icon {
            display: flex;
            align-items: center;
        }
        .van-field__left-icon .van-icon{
            display: flex;
            align-items: center;
        }
        .van-nav-bar .van-icon {
            color: #333;
            font-size: 18px;
        }
        .van-nav-bar__title{
            font-size: 18px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #333333;
        }
    </style>
</head>
<body>
<div id="app">
    <van-nav-bar title="绑定用户信息"   @click-left="onClickLeft" ></van-nav-bar>
    <div class="content">
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field
                        v-model="phone"
                        left-icon="/static/img/phone.png"
                        name=""
                        label=""
                        placeholder="请输入手机号码"
                />
                <!-- :rules="[{ required: true, pattern, message: '请输入正确的手机号' }]" -->
            </van-cell-group>
            <div style="margin: 16px;margin-top: 30px;">
                <van-button block type="info" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                phone:'',
                pattern:/^1[3-9]\d{9}$/
            }
        },
        mounted() {
        },
        methods: {
            onClickLeft(){
                history.back();
            },
            onSubmit(values) {
                if(!this.pattern.test(this.phone)){
                    this.$toast.fail('请输入正确的手机号');
                    return
                }
                console.log('submit', values);
                axios.request({
                    method: "POST",
                    url: "/index/index/doBind",
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                    params:{
                        mobile:this.phone
                    }
                })
                    .then((response) => {
                        console.log(response);
                        if(response.data.code == 1){
                            this.$toast({
                                message: '绑定成功',
                                icon: '/static/img/success.png',
                            })
                            setTimeout(function () {
                                window.location.href = '/index/index/lists';
                            },2500);
                        }else {
                            this.$toast.fail(response.data.msg);
                        }
                    }).catch(err=>{
                    console.log(err);
                    this.$toast.fail('请求失败，请重试');
                })
            },
        },
    })
</script>
</html>